<!--
 * @Author: dingxiao
 * @Date: 2025-06-23 10:51:35
 * @Description: 答题弹窗
-->
<template>
  <el-dialog title="调研测验" :show-close="false" class="quiz-dialog" append-to-body :visible="visible" width="50%">
    <!-- 答题区域 -->
    <div v-if="questions.length" class="quiz-container">
      <div v-for="(question, index) in questions" :key="question.id" class="question-item">
        <h4>{{ index + 1 }}. {{ question.questionSubject }}</h4>
        <div class="options">
          <el-radio-group v-model="question.correctAnswe">
            <div v-for="option in question.questionOptionConfigVOS" :key="option.id">
              <el-radio :label="option.optionContent">{{ option.optionContent }}</el-radio>
            </div>
          </el-radio-group>
        </div>
      </div>
      <!-- 提交按钮 -->
      <div class="submit-section">
        <el-button type="primary" :disabled="isAllAnswered" @click="submitAnswers">提交</el-button>
      </div>
    </div>
    <div v-else class="no-questions">暂无题目，请刷新重试。</div>
  </el-dialog>
</template>

<script>
import {
  isNil, map, pick, some,
} from 'lodash-es';
import { message, showErrorMsg } from '@/api/utils/pc-message';

export default {
  name: 'QuizDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    service: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      questions: [],
    };
  },
  computed: {
    /**
     * 判断用户是否已全部回答问题
     */
    isAllAnswered() {
      const { questions } = this;
      return some(questions, (question) => isNil(question.correctAnswe));
    },
  },
  mounted() {
    this.getQuestionList();
  },
  methods: {
    /**
     * 获取题目列表
     */
    async getQuestionList() {
      try {
        const data = await this.service.getQuestionRandom();
        this.questions = data;
      } catch (error) {
        showErrorMsg(error);
      }
    },
    /**
     * 提交答案
     */
    async submitAnswers() {
      const { questions } = this;
      const params = map(questions, (question) => pick(question, ['id', 'correctAnswe']));
      try {
        const {
          data: { data },
        } = await this.service.getTotalScore(params);
        this.$emit('submit', data);
      } catch (error) {
        showErrorMsg(error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.quiz-dialog {
  .options .el-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
}
.submit-section {
  margin-top: 40px;
  text-align: center;
}
</style>
